<template>
	<!-- 我的 -->
	<view class="content">
		<view class="topImg">
			<image
				src="https://tenfei04.cfp.cn/creative/vcg/veer/612/veer-316610198.jpg?x-oss-process=image/format,webp"
				mode="widthFix"></image>
		</view>
		<view class="main">
			<view class="user">
				<view class="userImg">
					<image
						src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F27%2F20181127072515_BzSRs.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658916541&t=0274c32237cfa786d13769249a0f1f73"
						mode="widthFix"></image>
				</view>
				<text class="userName">文浩楠</text>
			</view>
			<view class="navList">
				<view class="nav">
					<view class="nav_left">
						<text class="iconfont icon-gongjuxiang"></text>
						<text>我的收藏</text>
					</view>
					<text class="nav_right iconfont icon-xiangyou1"></text>
				</view>
				<view class="nav">
					<view class="nav_left">
						<text class="iconfont icon-xiangji"></text>
						<text>我的游记</text>
					</view>
					<text class="nav_right iconfont icon-xiangyou1"></text>
				</view>
				<navigator url="/pages/subpage/order/order">
					<view class="nav">
						<view class="nav_left">
							<text class="iconfont icon-dingdan"></text>
							<text>我的订单</text>
						</view>
						<text class="nav_right iconfont icon-xiangyou1"></text>
					</view>
				</navigator>
				<view class="nav">
					<view class="nav_left">
						<text class="iconfont icon-shezhi-xianxing"></text>
						<text>账户设置</text>
					</view>
					<text class="nav_right iconfont icon-xiangyou1"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	@import url('@/static/iconfontmy/iconfont.css');
	@radius: 16rpx; //圆角
	@h1: 36rpx; //大标题
	@h2: 32rpx; //二级标题
	@h3: 28rpx; //三级标题
	@text: 24rpx; //四级标题、标签、说明文字
	//颜色
	@color1: #C78748;
	@color2: #FFBF81;
	@color3: #673A19;
	@color4: #42BAE7;
	@color5: #5D9319;
	@color6: #E0593B;
	@color7: #FFF9EF;
	//间距
	@interval1: 72rpx;
	@interval2: 48rpx;
	@interval3: 32rpx;
	@interval4: 16rpx;

	.content {
		font-size: @text;
		background-color: @color7;
		height: 100vh;
		justify-content: start;
		align-items: flex-start;
	}

	.topImg {
		height: 300rpx;
		width: 750rpx;
		overflow: hidden;

		image {
			width: 750rpx;
		}
	}

	.main {
		width: 686rpx;
		height: ceil(100% - 300rpx);
		border-radius: @radius;
		padding: @interval3;
	}

	.user {
		display: flex;
		margin-bottom: @interval1;
	}

	.userImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;

		image {
			width: 120rpx;
		}
	}

	.userName {
		line-height: 120rpx;
		font-size: @h2;
		margin-left: 1em;
	}

	.navList {
		font-size: @h2;

		.nav {
			display: flex;
			justify-content: space-between;
			border-bottom: #DDD 1rpx solid;

			.nav_left,
			.nav_right {
				line-height: 3;
			}

			.nav_left .iconfont {
				margin-right: 1em;
				font-size: @h1;
			}
		}
	}
</style>
